<template>
    <div>
        <v-toolbar fixed>
            <v-spacer></v-spacer>
            <v-toolbar-title style="margin-left:0px;">仪器共享平台</v-toolbar-title>
            <v-spacer></v-spacer>
        </v-toolbar>
        <v-content class="scrollContent">
            <v-container fluid>
                <v-layout row wrap align-center>
                    <v-flex xs4 class="btnMenu" v-for="(menu,i) in computedMenuList" :key="i" @click="menuClick(menu.jumpEvent,menu.jumpTo)">
                        <v-layout column align-center justify-start>
                            <v-badge v-model="menu.showcount" color="error" left overlap>
                                <template slot="badge">
                                    <span>{{menu.count}}</span>
                                </template>
                                <v-icon size="70">{{menu.icon}}</v-icon>
                            </v-badge>
                            <p>{{menu.title}}</p>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-content>
    </div>
</template>

<script>
export default {
    name: "Home",
    components: {},
    data() {
        return {
            menuList: [
                {
                    icon: "event_note",
                    title: "设备预约",
                    jumpEvent: "booking",
                    jumpTo: "/devicelist",
                    count: 0,
                    showcount: false,
                    isShow: true
                },
                {
                    icon: "contacts",
                    title: "我的预约",
                    jumpEvent: "myBooking",
                    jumpTo: "/orderlist?type=booking",
                    count: 0,
                    showcount: false,
                    isShow: true
                },
                {
                    icon: "event_available",
                    title: "预约审批",
                    jumpEvent: "approval",
                    jumpTo: "/orderlist?type=approval",
                    count: 0,
                    showcount: false,
                    isShow: false
                },
                {
                    icon: "person",
                    title: "个人中心",
                    jumpEvent: "person",
                    jumpTo: "/person",
                    count: 0,
                    showcount: false,
                    isShow: true
                },
                {
                    icon: "message",
                    title: "消息中心",
                    jumpEvent: "message",
                    jumpTo: "/message",
                    count: 0,
                    showcount: false,
                    isShow: true
                }
            ]
        };
    },
    methods: {
        menuClick(jumpEvent, router) {
            this.$router.push(router);
        }
    },
    computed: {
        computedMenuList: function () {
            let List = [];
            for (let item of this.menuList) {
                if (item.isShow) {
                    List.push(item);
                }
            }
            return List;
        }
    }
};
</script>
<style>
</style>
